<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>
			clientHeight -
			https://www.cnblogs.com/gagarinwjj/p/conflict_client_offset_scroll.html
		</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.wrapper {
				position: relative;
				left: 10px;
				top: 10px;
			}

			.container {
				position: absolute;
				left: 50px;
				top: 50px;
				height: 100px;
				padding: 10px;
				border: 5px solid red;
				overflow-y: scroll;
				box-sizing: border-box;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<div class="container" style="height: 100px">
				远古时代，有姓有氏，姓氏一分为二。姓是大的氏族部落集团的徽示，氏是一个姓所分出的小氏族支系的标志。姓氏合二为一，是秦汉时才开始的。溯嬴姓渊源，颛顼高阳氏之孙皋陶（八恺之庭坚），皋陶生于山西洪洞（一说曲阜），舜因而赐以嬴姓。
				[1]
				嬴姓赵氏始于西周造父，造父为伯益的十五世孙。据《史记》载：“穆王使造父御，西巡狩，见西王母，乐之忘归。而徐偃王反，穆王日驰千里马，攻徐偃王，大破之。乃赐造父以赵城，由此为赵氏。”
			</div>

			<input type="button" value="获取宽高值" onclick="handleClick()" />
		</div>

		<script>
			function handleClick() {
				const container = document.querySelector('.container')
				console.log('style.height - 内联高度', container.style.height)
				console.log(
					'height - 真实可见内容高度：内联高度 - 滚动条',
					window.getComputedStyle(container).height,
				)
				console.log(
					'getBoundingClientRect === offSetHeight)',
					container.getBoundingClientRect(),
				)
				console.log(
					'offsetHeight - 可见高度：内联高度 + padding(已包含滚动条) + border',
					container.offsetHeight,
				)
				console.log(
					'clientHeight - 内容高度：内联高度 + padding - 滚动条',
					container.clientHeight,
				)
				console.log(
					'scrollHeight - 包含滚动的内容高度',
					container.scrollHeight,
				)

				console.log(
					'offsetTop - 相对父级定位的 top',
					container.offsetTop,
				)
				console.log('clientTop - border-top 宽度', container.clientTop)
				console.log('scrollTop - 滚动的高度', container.scrollTop)
			}
			handleClick()
		</script>
	</body>
</html>
